import React from 'react'

//导入antd组件
import { Spin, Alert,Pagination } from 'antd';

// 导入 fetch-jsonp
import fetchJSONP from 'fetch-jsonp'

import MovieItem from './MovieItem.jsx'

export default class MovieList extends React.Component{
  constructor(props){
    super(props)
    this.state = {
        movies:[], //电影列表
        nowPage:parseInt(props.match.params.page) || 1, //当前展示第几页的数据
        pageSize:12, //每页显示多少条数据
        total:0, //总的数据量
        isLoading:true, //true表示正在加载中。。。
        movieTypes:props.match.params.type  //当前电影类型
    }
    // console.log(props.match)
  }

  componentWillMount(){
    this.loadMovieListByTypeAndPage();

  }
//   组件将要接收新的属性
  componentWillReceiveProps(nextProps){
    //   console.log(nextProps.match)
    //   路由参数发生变化后，重置相关参数
        this.setState({
            isLoading:true,
            movieTypes:nextProps.match.params.type,
            nowPage:parseInt(nextProps.match.params.page) || 1
        },function(){
            this.loadMovieListByTypeAndPage();
        })
        
  }
 
  render(){
    return <div>
        {this.renderList()}
     {/* <h1>MovieList---{this.props.match.params.type}---{this.props.match.params.page}</h1>  */}
    </div> 

  }

  //获取电影列表数据
  loadMovieListByTypeAndPage = ()=>{
            //fetch不支持跨域，
    //   fetch('http://vue.studyit.io/api/getlunbo').then(response=>response.json()).then(data=>{
    //       console.log(data)
    //   })

    //使用fetchJSONP解决跨域
    // const start = this.state.pageSize * (this.state.nowPage - 1)
    // const url = `https://api.douban.com/v2/movie/${this.state.movieType}?start=${start}&count=${this.state.pageSize}`
    // fetchJSONP(url).then(response=>response.json()).then(data=>{
    //     this.setState({
    //         isloading: false, // 将 loading 效果隐藏
    //         movies: data.subjects, // 为电影列表重新赋值
    //         total: data.total // 把总条数，保存到 state 上
    //       })
    // })

    console.log(this.state.movieTypes)
    let data = require(`../../dataJson/${this.state.movieTypes}.json`);

    // console.log(data)
    setTimeout(() => {
         this.setState({
            isLoading: false, 
            movies: data.subjects, 
            total: data.total
          })       
    }, 1000);
  }
  
  //渲染列表
  renderList = ()=>{
      if(this.state.isLoading){
          return <Spin tip="Loading...">
                    <Alert
                        message="电影列表加载中。。。"
                        description="精彩即将呈现"
                        type="info"
                    />
                </Spin>
      }else{
          return <div>
              <div style={{display:'flex',flexWrap: 'wrap'}}>
                {this.state.movies.map(item=>{
                  
                    return <MovieItem key={item.id} {...item} history={this.props.history}></MovieItem>//将history传递给子组件，实现子组件编程式导航
                })}
              </div>

              {/* 分页组件 */}
              <Pagination 
              defaultCurrent={this.state.nowPage} 
              pageSize={this.state.pageSize} 
              total={this.state.total} 
              onChange={this.pageChanged}/>
          </div>
      }
  }

  //页码改变的时候调用
  pageChanged = (page)=>{
    //console.log(page)
    // 这里手动使用BOM对象，虽然实现了跳转，但是并不理想，改为使用路由的方法，使用编程式导航
    //console.log(this.props)
    // window.location.href=`#/movie/${this.state.movieTypes}/${page}`
    this.props.history.push(`/movie/${this.state.movieTypes}/${page}`)
  }
}